<template>
  <a-modal :visible="true" width="60%" :title="showTitle + '热词'" @cancel="reset" :footer="null">
    <div>
      <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
        <a-form-item label="热搜关键词">
          <a-input
            :maxLength="10"
            placeholder="请输入热搜关键词"
            v-decorator="[
              'keyword',
              {
                rules: [
                  {
                    required: true,
                    whitespace: true,
                    message: '请输入热搜关键词'
                  }
                ]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="热搜词类型">
          <a-radio-group
            @change="typeChange"
            v-decorator="[
              'type',
              {
                rules: [
                  {
                    required: true,
                    message: '请选择热搜词类型'
                  }
                ],
                initialValue: 'keyword'
              }
            ]"
          >
            <a-radio value="keyword">
              关键词搜索商品
            </a-radio>
            <a-radio value="link">
              链接页面
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="页面路径" v-if="type == 'link'">
          <a-input
            placeholder="请填写页面路径，保证以/开头"
            v-decorator="[
              'link',
              {
                rules: [
                  {
                    required: true,
                    pattern: '^\/[a-zA-Z0-9_-]',
                    whitespace: true,
                    message: '请填写页面路径，保证以/开头'
                  }
                ]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item label="热搜词样式">
          <a-checkbox-group v-decorator="['styleList']" @change="checkboxChange">
            <a-checkbox value="active">是否高亮</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item label="颜色" v-if="showColor">
          <a-input   v-decorator="['color',{initialValue:'#327542',rules:[{required:true, message:'请选择高亮颜色'}]}]" type="color" style="width:100px"></a-input>
        </a-form-item>
        <a-form-item label="图标" extra="60x60px，支持jpg、png、gif图片格式">
          <aliossImageUpload
            :isMultiple="false"
            v-decorator="['icon']"
          ></aliossImageUpload>
          <p>* iconfont图标库：<a href="https://www.iconfont.cn" target="_blank">https://www.iconfont.cn</a></p>
        </a-form-item>
        <a-row>
          <a-col :span="24" class="info-action">
            <a-button type="primary" @click="reset">返回</a-button>
            <a-button type="primary" html-type="submit" class="ml-20" :loading="loading">保存</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>
<script>
import { updateWord } from '@/api/micromall/operation'
import aliossImageUpload from '../../../components/aliossImageUpload'
export default {
  data() {
    return {
      type: 'keyword',
      formItemLayout: {
        labelCol: {
          xs: { span: 8 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 16 },
          sm: { span: 16 }
        }
      },
      loading: false,
      showColor:false
    }
  },
  props: {
    showTitle: {
      type: String,
      default: '新增'
    },
    brandId: {
      type: Number
    },
    words: {
      type: Object,
      default: null
    }
  },
  components: { aliossImageUpload },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'hotSearchForm' })
  },
  watch: {
    words: {
      handler: function(n) {
        console.log(n)
        if (n) {
          const obj = {
            keyword: n.keyword,
            type: n.type,
            icon:n.icon
          }
          const styleObj = JSON.parse(n.style)
          if(Array.isArray(styleObj)){
            this.showColor = true
            obj.styleList = styleObj.slice(0,1)
            obj.color = styleObj[1] || '#327542' //'默认值'
          }
          if (n.type == 'link') {
            this.type = n.type
            obj.link = n.link
          }
          this.$nextTick(() => {
            this.form.setFieldsValue(obj)
          })
        } else {
          this.type = 'keyword'
        }
      },
      immediate: true
    }
  },

  methods: {
    typeChange(e) {
      this.type = e.target.value
    },
    checkboxChange(value){
        this.showColor = value.length > 0
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    async submit(values) {
      const { words } = this
      this.loading = true
      console.log(values)
      values.brandId = this.brandId
      if (words) {
        values.id = words.id
      }
      if(Array.isArray(values.styleList) && values.styleList.length > 0){
        values.styleList.push(values.color)
        delete values.color
      }
      const re = await updateWord(values)
      this.loading = false
      console.log(re)
      if (re.code == 200) {
        let text = words != null ? '编辑成功' : '新增成功'
        this.$message.success(text)
        this.reset()
      } else {
        this.$message.error(re.msg)
      }
    },
    reset() {
      this.form.resetFields()
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
</style>
